<template>
	<view class="root main-home">
		<view class="main-home-top">
			<ScrollTab ref="scrollTab"
			           :tabs="tabs"
			           :initialIndex="initialIndex"
			           :normalColorArr="[150, 150, 150]"
			           :checkedColorArr="[51, 51, 51]"
			           :indicatorOffset="7"
			           :onTabItemClick="onTabItemClick"
			/>
		</view>
		<ViewPager ref="viewPager"
		           class="view-pager"
		           :pageCount="pages.length"
		           :initialIndex="initialIndex"
		           :onPageScrolled="onPageScrolled"
		           :onPageSelected="onPageSelected"
		>
			<template v-slot:[index] v-for="(item,index) in pages">
				<component :is="item.component" v-if="item.add" :ref="item.ref"/>
			</template>
		</ViewPager>
	</view>

</template>

<script>
    import ScrollTab from '/src/components/common/ScrollTab'
    import ViewPager from '/src/components/common/ViewPager'
    import Recommend from "./home/recommend";
    import SameCity from "./home/same-city";

    export default {
        name: 'Home',
        components: {
            Recommend, SameCity, ScrollTab, ViewPager
        },
        data() {
            const initialIndex = 0
            const pages = [
                {
                    title: '推荐',
                    component: Recommend,
                    ref: 'recommend'
                },
                {
                    title: '同城',
                    component: SameCity,
                    ref: 'sameCity'
                },
            ]
            const tabs = []
            pages.forEach((item, index) => {
                pages[index].add = index === initialIndex
                tabs[index] = item.title
            })
            return {
                initialIndex,
                pages,
                tabs,
                curIndex: initialIndex
            }
        },
        methods: {
            onTabItemClick(index) {
                this.$refs.viewPager.setCurrentItem(index)
            },
            onPageScrolled(index, progress) {
                this.$refs.scrollTab.scrollTo(index, progress)
            },
            onPageSelected(index) {
                this.curIndex = index
                this.$refs.scrollTab.setCurIndex(index)
                this.loadPageData(index)
            },
            loadPageData(index) {
                if (this.pages[index].add) {
                    this.$refs[this.pages[index].ref][0].loadData()
                } else {
                    this.pages[index].add = true
                    this.$nextTick(() => {
                        this.$refs[this.pages[index].ref][0].loadData()
                    })
                }
            },
            loadData() {
                this.loadPageData(this.curIndex)
            }
        },
        mounted() {
        
        },

    }
</script>

<style lang="scss" scoped>
	.main-home {
		position: absolute;
	}
	
	.main-home-top {
		height: 40px;
		background-color: $white;
	}
	
	.view-pager {
		position: absolute;
		top: 40px;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	.scroll-tab {
		.tab-item {
			font-size: 18px;
			font-weight: bold;
			margin: 0 8px;
		}
		
		.indicator {
			bottom: 3px;
		}
	}
</style>
